<!--
 * @Author: Meow
 * @Date: 2019-10-10 16:19:40
 * @LastEditors: Meow
 * @LastEditTime: 2019-10-11 16:20:19
 * @Description: 表格
 -->
<template>
  <div>
    <div class="table-top">
      <span class="label">名称:</span>
      <el-input></el-input>
      <el-button type="primary" @click="search">搜索</el-button>
      <el-button type="primary" @click="add">添加</el-button>
      <el-button type="primary" @click="del">删除</el-button>
    </div>
    <!-- 添加 -->
    <el-dialog title="修改流程节点" :visible.sync="showDialog1" width="50%" append-to-body>
      <!-- <div @click="qwer">123213414124</div> -->
      <Form :form="form" />
      <el-button type="primary">提交</el-button>
    </el-dialog>
    <!-- <el-dialog title="12" :visible.sync="aaaa" width="30%" append-to-body>123</el-dialog> -->
    <el-table
      :data="tableData"
      border
      style="width: 100%"
      :header-cell-style="{background:'#eef1f6',color:'#606266'}"
    >
      <el-table-column type="selection" width="55"></el-table-column>
      <el-table-column prop="name" label="业务名称" align="center"></el-table-column>
      <el-table-column prop="type" label="节点类型" align="center"></el-table-column>
      <el-table-column prop="type" label="业务密级" align="center"></el-table-column>
      <el-table-column prop="side" label="业务边界" align="center"></el-table-column>
      <el-table-column prop="label" label="标签" align="center"></el-table-column>
      <el-table-column label="操作" align="center">
        <el-button size="mini" type="primary">删除</el-button>
      </el-table-column>
    </el-table>
  </div>
</template>
<script>
import Form from "./Form";
export default {
  name: "Table",
  components: {
    Form
  },
  props: {
    // 表格数据
    tableData: {
      type: Array,
      default: []
    }
  },
  data() {
    return {
      // aaaa: false,
      showDialog1: false,
      // form: [
      //   {
      //     name: "单位名称",
      //     type: 1,
      //     value: "-- 请选择 --",
      //     options: [
      //       {
      //         value: "选项1",
      //         label: "自然资源与规划局"
      //       },
      //       {
      //         value: "选项2",
      //         label: "公安局"
      //       },
      //       {
      //         value: "选项3",
      //         label: "民政局"
      //       }
      //     ]
      //   },
      //   {
      //     name: "执行处室",
      //     type: 1,
      //     value: "-- 请选择 --",
      //     options: [
      //       {
      //         value: "选项1",
      //         label: "处室1"
      //       },
      //       {
      //         value: "选项2",
      //         label: "处室2"
      //       },
      //       {
      //         value: "选项3",
      //         label: "处室3"
      //       }
      //     ]
      //   }
      // ],
      // tableData: [
      //   {
      //     date: "2016-05-03",
      //     name: "王小虎",
      //     address: "上海市普陀区金沙江路 1518 弄"
      //   },
      //   {
      //     date: "2016-05-02",
      //     name: "王小虎",
      //     address: "上海市普陀区金沙江路 1518 弄"
      //   },
      //   {
      //     date: "2016-05-04",
      //     name: "王小虎",
      //     address: "上海市普陀区金沙江路 1518 弄"
      //   },
      //   {
      //     date: "2016-05-01",
      //     name: "王小虎",
      //     address: "上海市普陀区金沙江路 1518 弄"
      //   },
      //   {
      //     date: "2016-05-08",
      //     name: "王小虎",
      //     address: "上海市普陀区金沙江路 1518 弄"
      //   },
      //   {
      //     date: "2016-05-06",
      //     name: "王小虎",
      //     address: "上海市普陀区金沙江路 1518 弄"
      //   },
      //   {
      //     date: "2016-05-07",
      //     name: "王小虎",
      //     address: "上海市普陀区金沙江路 1518 弄"
      //   }
      // ],
      multipleSelection: []
    };
  },
  methods: {
    // 点击添加
    add() {
      this.showDialog1 = true;
    },
    search() {
      this.showDialog1 = true;
    },
    del() {
      this.showDialog1 = true;
    },
    // qwer() {
    // this.aaaa = true;
    // },
    // 点击[返回]
    back() {
      this.$router.push({
        path: "/frame/ProcessManagementHost/ProcessManagementLogic"
      });
    }
  }
};
</script>
<style lang="less" scoped>
.table-top {
  .flex();
}
.label {
  text-align: right;
  font-size: 14px;
  min-width: 80px;
  margin-right: 20px;
}
.el-input {
  max-width: 300px;
  margin-right: 20px;
}
// @import url("../ProcessManagement.less");
</style>